<template>
  <div class="main">
<!--    <div class="basic-box button-bar">-->
<!--      <el-input v-model="searchValue" class="searchInput" placeholder="请输入内容" />-->
<!--      <el-button class="button" type="primary" icon="el-icon-search">搜索</el-button>-->
<!--      <el-dropdown trigger="click" class="button">-->
<!--        <span class="el-dropdown-link">-->
<!--          <el-button type="primary" icon="el-icon-files">书籍分类</el-button>-->
<!--        </span>-->
<!--        <el-dropdown-menu slot="dropdown">-->
<!--          <el-dropdown-item v-for="(item,index) in categoryList">{{item.title}}</el-dropdown-item>-->
<!--        </el-dropdown-menu>-->
<!--      </el-dropdown>-->
<!--    </div>-->
    <div class="basic-box" style="width: 100%">
      <el-table ref="table" :data="tableData">
        <el-table-column prop="id" label="id" min-width="150" align="center" />
        <el-table-column prop="username" label="用户名" min-width="150" align="center" />
<!--        <el-table-column label="头像" min-width="150" align="center">r-->
<!--          <template slot-scope="scope">-->
<!--            <el-avatar shape="square" :size="50" :src="'http://193.112.128.94:7001' +tableData[scope.$index].avatar"/>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="phone" label="手机号码" min-width="150" align="center" />
        <el-table-column prop="address" label="地址" min-width="150" align="center" />
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button class="action-button" type="primary" size="small" @click="toDetail(scope.row)">查看</el-button>
<!--            <el-button class="action-button" type="danger" size="small">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <span class="demonstration">直接前往</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>

    <!--    弹窗类组件-->
    <el-dialog title="修改书籍库存数量" :visible.sync="isEditMode" width="20%" center>
      <span><el-input v-model="editValue" style="width: 100%;" placeholder="请输入库存数量" /></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditMode = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getUserList } from '@/api/user.js'
  export default {
    data() {
      return {
        searchValue: '',
        isEditMode: false,
        editValue: '',
        editId: '',
        tableData: [
          {"phone" : "13751706464", "username" : "user", "address" : "test address","avatar" :"http://img5.imgtn.bdimg.com/it/u=1962519321,749854898&fm=26&gp=0.jpg"}
        ],

        categoryList:[
          {
            "icon" : "wenxue",
            "title" : "文学"
          }, {
            "icon" : "xiaofeipin",
            "title" : "流行"
          }, {
            "icon" : "yishu",
            "title" : "文化"
          }
        ],
        page: 1,
        size: 7
      }
    },
    computed: {
    },
    mounted() {
      this.getTableData()

      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i]['num'] = Math.round(Math.random() * 10)
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size = `${val}`
        this.page = 1
        this.getTableData()

      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = `${val}`
        this.getTableData()
      },
      toDetail(row) {
        console.log(row)
        this.$router.push({ path: 'userDetail', query: { 'id': row.id }})
      },
      toEdit(index) {
        this.editId = this.tableData[index].isbn
        this.isEditMode = true
      },
      confirmEdit() {
        var from = { isbn: this.editId, num: this.editValue }
        this.editValue = ''
        this.editId = ''
        //    发送表单
      },
      getTableData(){
        this.tableData = []
        getUserList(this.page,this.size).then(
          res =>{
            for(var i = 0;i < res.data.table.length;i++){
              // console.log(res.data.table[i])
              if(res.data.table[i].username !== this.$store.state.user.name){
                const element = res.data.table[i]
                this.tableData.push(element)
              }
            }

          }
        )
      }
    }
  }
</script>

<style scoped lang="less">
  .main{
    margin:  40px 40px 0 40px;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .basic-box{
    padding: 40px;
    margin-bottom: 20px;
    border-radius: 10px;
  }
  .action-button{
    border-radius: 5px;
    padding: 5px 10px;
    /*border: 1px solid #a2a2a2;*/
  }
  .button-bar{
    /*position: absolute;*/
    /*top: 40px;*/
    /*align-self: flex-end;*/
    width: 40%;
    display: flex;
    flex-direction: row;
    .searchInput{
      width: 200px;
    }
    .button{
      margin-left: 20px;
    }
  }
  .pagination{
    margin: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
  }
</style>
